<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" size="mini" label-position="right">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目名称" prop="projectId">
            <el-select v-model="ruleForm.projectId" placeholder="请选择" v-if="businessCode!='ZB'">
              <el-option v-for="(item,index) in projectlist" :key="index"
              :label="item.projectName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司名称" prop="companyName">
            <el-input class="input-item" v-model="ruleForm.companyName" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缴纳金额（元）" prop="amount">
            <el-input type="number" class="input-item"
            v-model="ruleForm.amount"
            placeholder="请输入" maxlength="20"
            oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}if(value<0){value='0'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缴纳时间" prop="paymentDate">
            <el-date-picker v-model="ruleForm.paymentDate" type="date" placeholder="选择日期"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务类型">
            <el-cascader v-model="businesstypeId"
              ref="ref_business"
              :options="businesstypeTree"
              :props="businesstProps"
              :show-all-levels="false"
              clearable
              @change="businessChange"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item style="padding: 20px 0;">
            <el-button @click="onCancel(false)">取消</el-button>
            <el-button type="primary" @click="submitForm()">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Securitydeposit, Administration } from '@/api/projectAdministration.js';
import { Businesstype } from '@/api/business.js';
export default {
  name: 'Securitydepositadd',
  props: {
    depositId: {
      default: undefined
    }
  },
  data () {
    return {
      loading: false,
      isShowloading: false,
      businesstypeTree: [],
      businesstypeId: [],
      businesstProps: {
        value: 'id',
        label: 'businessName',
        children: 'children',
        checkStrictly: true
      },
      projectlist: [],
      ruleForm: {
        projectId: '',
        companyName: '',
        amount: '',
        paymentDate: '',
        businessType: ''
      },
      rules: {
        projectId: [{ required: true, message: '请选择', trigger: 'change' }],
        companyName: [{ required: true, message: '请输入', trigger: 'blur' }],
        amount: [{ required: true, message: '请输入', trigger: 'change' }],
        paymentDate: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    };
  },
  created () {
  },
  computed: {
    isEdit () {
      return this.depositId != null && this.depositId !== '';
    }
  },
  mounted () {
    if (this.isEdit) {
      this.loadDepositdetail()
    } else {
      this.loadbusinesstypeTree()
      this.loadProjectList()
    }
  },
  methods: {
    /**
     * 商机详情
     */
    loadDepositdetail () {
      let params = this.depositId
      return new Promise((resolve, reject) => {
        Securitydeposit.detail(this, params).then(res => {
          this.ruleForm = res.data
          this.ruleForm.businessLevel = res.data.businessLevel.toString()
          this.parentId.push(res.data.parentId)
          this.loadbusinesstypeTree()
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 项目列表
     */
    loadProjectList () {
      return new Promise((resolve, reject) => {
        Administration.listForDeposit(this).then(res => {
          this.projectlist = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 业务类型信息表树形列表
     */
    loadbusinesstypeTree () {
      return new Promise((resolve, reject) => {
        Businesstype.tree(this).then(res => {
          this.businesstypeTree = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    businessChange () {
      let info = this.businesstypeId
      let length = info.length - 1
      this.ruleForm.businessType = info[length]
      console.log(this.ruleForm.businessType)
      this.$refs['ref_business'].dropDownVisible = false
    },
    /**
     * 提交表单
     */
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.isShowloading = true;
          let params = {
            addDto: this.ruleForm
          };
          return new Promise((resolve, reject) => {
            Securitydeposit.add(this, params).then(res => {
              this.$message({
                showClose: true,
                message: '操作成功！',
                type: 'success'
              });
              this.onCancel(true);
            }).catch(e => {
              reject(e);
            });
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onCancel (isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess);
      }
    }
  }
}
</script>

<style scoped>
h4{margin-bottom: 0;}
.table_container{margin: 10px 0;}
.form-single-info{display: flex;justify-content: center;}
.el-form-info{box-shadow: 0 0 10px rgba(0,0,0,0.05);padding: 20px;}
.el-form-info strong{margin: 0 10px;}
</style>
